<template>
		<div id="l-biao2" style="width:100%;height:90%;"></div>
</template>

<script>
	import echarts from 'echarts';
	export default {
		name: 'yearRecycling',
		props:['yearRecycling'],
		data() {
			return {
				// 页面查询数据
				data: [],
				areaData: [],
				queryData: {
					selectArea: 0,
					date: [],
				},
				myChart: null,
				option: {

				}
			}
		},
		mounted() {
			setTimeout(() => {
				this.hadleGetFilesListApi();
			})
		},
		methods: {		
			hadleGetFilesListApi(x,y) {
				const option = {
					title: {
						text: '本年回收量(KG)',
						textStyle: {
							color: '#FFFFFF',
							fontSize:20
						}
					},

					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},

					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					grid: {
						left: '3%',
						right: '6%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: x,
						axisLabel: {
							show: true,
							textStyle: {
								// color: '#c3dbff',  //更改坐标轴文字颜色
								fontSize: 16 //更改坐标轴文字大小
							}
						},
						axisLine: {
							lineStyle: {
								color: '#FFFFFF',
								width: 1,
							}
						}

					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: false
						},
						axisLabel: {
							show: true,
							textStyle: {
								// color: '#c3dbff',  //更改坐标轴文字颜色
								fontSize: 16 //更改坐标轴文字大小
							}
						},
						axisLine: {
							lineStyle: {
								color: '#FFFFFF',
								width: 1,
							}
						}

					},
					series: [{
						data: y,
						type: 'line',
						smooth: true,
						areaStyle: {
							normal: {
								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(63,227,236,0.8)'
								}, {
									offset: .4,
									color: 'rgba(63,227,236,0.3)'
								}, {
									offset: 1,
									color: 'rgba(63,227,236,0.00)'
								}])
								// ['rgba(63,227,236,0.3)'],
							}
						},
						itemStyle: {
							color: ['#3FE3EC'],
						},

					}]
				};
				let myChart = this.$echarts.init(document.getElementById('l-biao2'));
				myChart.setOption(option);
				window.addEventListener("resize",function(){
				    myChart.resize();
				})
			}
		},
		watch:{
			yearRecycling(newval,oldval){
				var x=[]
				var y=[]
				for(var i =0;i<newval.length;i++){		
					x.push(newval[i].createTime)
					y[i]=newval[i].totalWeight
				}
				this.hadleGetFilesListApi(x,y)
			}
		}
	};
</script>
